<template>
  <view>
    <!-- 重点源、节点博主、预警 -->
    <view class='screen1' v-if='headTab_index == 1 || headTab_index == 2 || headTab_index == -2'>
      <view class='left'>
        <!-- 关注 -- 重点源 -- 全部分类 -->
        <view class='select_item' v-if='headTab_index != -2' @tap='clickAllClass(0)'>
          <view :class='{select_on:allClass_status}'>
            <view>{{class_arr[is_class]}}</view>
            <text class='iconfont icon-jiantou-copy-copy'></text>
          </view>
        </view>
        <!-- 关注 -- 重点源 -- 全部等级 -->
        <view class='select_item' v-if='headTab_index == 1 || headTab_index == -2' @tap='clickAllLevel'>
          <view :class='{select_on:allLevel_status}'>
            <view>{{grade_arr[grade_index]}}</view>
            <text class='iconfont icon-jiantou-copy-copy'></text>
          </view>
        </view>
      </view>
      <view class='icon_box'>
        <!-- 日历图标 -->
        <view @tap='clickTime'>
          <text class='iconfont icon-rili'></text>
        </view>
        <!-- 搜索图标 -->
        <view @tap='clickSearch'>
          <text class='iconfont icon-sousuo'></text>
        </view>
      </view>
    </view>
    <!-- 关注 -- 收藏分享 -->
    <view class='screen1 screen2' v-if='headTab_index == 4'>
      <view class='left'>
        <view class='btn_item' :class='{on:enshrineShare_index == 0}' @tap='enshrineShare(0)'>收藏
          <view class='close_btn' v-if='enshrineShare_index == 0'>
            <view></view>
            <text class='iconfont icon-guanbi'></text>
          </view>
        </view>
        <view class='btn_item' :class='{on:enshrineShare_index == 1}' @tap='enshrineShare(1)'>分享
          <view class='close_btn' v-if='enshrineShare_index == 1'>
            <view></view>
            <text class='iconfont icon-guanbi'></text>
          </view>
        </view>
      </view>
      <view class='icon_box'>
        <view @tap='clickSearch'>
          <text class='iconfont icon-sousuo'></text>
        </view>
      </view>
    </view>
    <!-- 分析 -->
    <view class='screen1 screen2' v-if='headTab_index == -3'>
      <view class='left'>
        <view class='btn_item'>一周
          <view class='close_btn'>
            <view></view>
            <text class='iconfont icon-guanbi'></text>
          </view>
        </view>
        <view class='btn_item'>一个月
          <view class='close_btn'>
            <view></view>
            <text class='iconfont icon-guanbi'></text>
          </view>
        </view>
      </view>
      <view class='icon_box'>
        <view @tap='clickSearch'>
          <text class='iconfont icon-sousuo'></text>
        </view>
      </view>
    </view>
    <!-- 专题 -->
    <view class='screen1 screen3' v-if='headTab_index == -1'>
      <view class='left'>
        <view class='select_item'>
          <picker 
            mode="multiSelector" 
            :range='class_range'
            :value='class_value' 
            @columnchange='columnchange' 
            @change='pickerChange'>
            <view class='class_name'>
              <view v-if='classChild_Arr.length != 0'>{{classChild_Arr[class_value[0]][class_value[1]]}}</view>
            </view>
          </picker>
        </view>
      </view>
      <view class='icon_box'>
        <!-- 全部情感 -->
        <view v-if='emotion_status == null' @tap='selectEmotion(1)'>
          <text class='iconfont icon-B'></text>
        </view>
        <!-- 正面情感 1 -->
        <view v-if='emotion_status == 1' @tap='selectEmotion(0)'>
          <text class='iconfont icon-Smile' style='color:#1bbf00'></text>
        </view>
        <!-- 中性情感 0 -->
        <view v-if='emotion_status == 0' @tap='selectEmotion(-1)'>
          <text class='iconfont icon-biaoqing' style='color:#999;font-size: 60upx'></text>
        </view>
        <!-- 负面情感 -1 -->
        <view v-if='emotion_status == -1' @tap='selectEmotion(null)'>
          <text class='iconfont icon-shangxin' style='color:#d40e00'></text>
        </view>
        <view @tap='clickSort'>
          <text class='iconfont icon-paixu-shuliangjiangxu' :class='{icon_status:sort_status}'></text>
        </view>
        <view @tap='clickTime'>
          <text class='iconfont icon-rili'></text>
        </view>
        <view @tap='clickSearch'>
          <text class='iconfont icon-sousuo'></text>
        </view>
        <view>
          <picker 
            mode="multiSelector" 
            :range='class_range'
            :value='class_value' 
            @columnchange='columnchange' 
            @change='pickerChange'>
            <text class='iconfont icon-erjijigouguanli'></text>
          </picker>
        </view>
        <view>
          <text class='iconfont icon-tianjiajiahaowubiankuang'></text>
        </view>
      </view>
    </view>

    <!-- 全部分类、全部级别选择 -->
    <screen-popup ref="selece_popup" :top="head_height">
      <view class='all_class'>
        <select-item 
          :list='options'
          :mode='mode'
          :index='option_index'
          :index_arr='index_arr'
          @selected='selected'
          ></select-item>
      </view>
    </screen-popup>
    <!-- 时间选择 -->
    <screen-popup ref="time_popup" :top="head_height" @clickMack="closeTime">
      <view class='time_select'>
        <view class='top'>
          <view class='item'
            :class='{on: date_index == time_index}' 
            v-for='(time,time_index) in time_arr' :key='time_index'
            @tap='selectDate(time_index)'>{{time}}</view>
        </view>
        <view class='bottom'>
          <view class='item' 
            :class='{on: date_index == time_arr.length}'
            @tap='selectDate(time_arr.length)' 
            >
            {{date_arr.length == 0?"自定义":"开始日期:"+date_arr[0].slice(0,10)+ "- 结束日期:"+date_arr[1].slice(0,10)}}
            </view>
        </view>
      </view>
    </screen-popup>
    <!-- 搜索 -->
    <screen-popup ref="search_popup" :top="head_height" @clickMack='closeSearch'>
      <view class='search_view'>
        <view class='input_item'>
          <view>
            <text class='iconfont icon-sousuo'></text>
          </view>
          <input type="text" placeholder="请输入关键词搜索" v-model="search_content" @confirm='confirmSearch'>
        </view>
      </view>
    </screen-popup>
    
    <!-- 日期选择器 -->
    <datepicker 
      :show='picker_show'
      @confirm='confirmDate'
      @cancel='closePicker'></datepicker>
  </view>
</template>

<script>

  import screenPopup from '@/pages/common/screenPopup.vue'
  import datepicker from '@/pages/common/datepicker.vue'

  export default {
    components: {
      screenPopup,
      datepicker,
    },
    props: {
      headTab_index: {    // 1 重点源   2 节点博主   4 收藏分享    -1 分类   -2 预警   -3 分析
        type: Number,
        default: 0,
      },
      head_height: {
        type: Number,
        default: 0,
      },
      class_list: Array,
      classChild_Arr: {
        type:Array,
        default() {
          return [[]]
        }
      },
      class_on: {
        type:Array,
        default() {
          return [0,0]
        }
      },
      class_arr: {
        type:Array,
        default() {
          return []
        }
      },
      class_index: {
        type:Number,
        default: 0,
      },
      grade_arr: {
        type:Array,
        default() {
          return []
        }
      },
      dateIndex: {
        type: Number,
        default: 0
      },
      dateArr: {
        type:Array,
        default() {
          return []
        }
      },
      date_openType: {
        type:Number,
        default: 0
      },
      keyword: {
        type:String,
        default: ""
      },
      sortStatus: {
        type:String,
        default: ""
      },
      emotion: Number
    },
    data() {
      return {
        is_class: 0,    // 重点源 -> 全部分类的已选择选项index
        grade_index: 0,
        allClass_status: false,
        time_status: false,
        allLevel_status: false,
        // 日期
        time_arr: ["清空","今日","三日","七日"],
        date_index: 0,
        date_arr: [],
        picker_show: false,
        sort_status: false,
        enshrineShare_index: 0,
        emotion_status: null,   // 情感状态
        
        options: [],
        mode: 0,       // 0为单选模式  1为多选模式
        option_index: null,
        index_arr: [],

        // 专题分类
        class_range: [this.class_list,this.classChild_Arr[0]],
        class_value: [0,0],
        search_content: "",
      }
    },
    watch: {
      headTab_index() {
        this.closeSelect();
        this.closeTime();
        this.closeSearch();
        this.search_content = "";
      },
      classChild_Arr(val) {
        this.class_range[1] = val[0]
      },
      search_content(val) {
        // if(val == "") {
        //   this.$emit("searchContent",this.search_content)
        // }
      },
      class_index(num) {
        this.is_class = num
      },
      dateIndex(val) {
        this.date_index = val;
      },
      dateArr(val) {
        this.date_arr = val;
      },
      keyword(val) {
        this.$nextTick(() => {
          this.search_content = val;
        })
      },
      class_on(arr) {
        this.class_value = arr;
      },
      sortStatus(val) {
        val == "desc" ? this.sort_status = false : this.sort_status = true;
      },
      emotion(val) {
        this.emotion_status = val;
      },
    },
    methods: {
      // 点击全部分类
      clickAllClass(type) {
        if(this.allClass_status) {
          this.allClass_status = false;
          this.$refs.selece_popup.hidden();
        }else {
          
          if(type == 0) {
          // 全部分类赋值
            this.options = [];
            this.mode = 0;
            this.options = [...this.class_arr];
            this.option_index = this.is_class;
            
          }else {
            // 分类
            
          }
          this.closeSearch();
          this.closeTime();
          this.allLevel_status = false;
          this.allClass_status = true;
          this.$refs.selece_popup.show();
        }
      },
      // 点击全部级别
      clickAllLevel() {
        if(this.allLevel_status) {
          this.allLevel_status = false;
          this.$refs.selece_popup.hidden();
        }else {
          this.options = [];
          this.mode = 0;
          this.options = [...this.grade_arr];
          this.option_index = this.grade_index;
          this.closeSearch();
          this.closeTime();
          this.allClass_status = false;
          this.allLevel_status = true;
          this.$refs.selece_popup.show();
        }
      },
      // 点击选择日期
      clickTime() {
        if(this.time_status) {
          this.time_status = false;
          this.$refs.time_popup.hidden();
        }else {
          this.closeSelect();
          this.closeSearch();
          this.time_status = true;
          this.$refs.time_popup.show();
        }
        this.$emit('clickDate')
      },
      // 选择日期
      selectDate(index) {
        if(index != this.time_arr.length) {
          // 非自定义
          let start_time = "";
          let end_time = "";
          let date = null;
          let today = new Date()/1000;
          switch(index) {
            case 1: 
              // 今日
              start_time = this.$time(today,"YY-MM-DD") +" "+ "00:00:00"
            break;
            case 2: 
            // 三日
              date = today - 60*60*24*3;
              start_time = this.$time(date,"YY-MM-DD") +" "+ "00:00:00"
            break;
            case 3: 
              // 七日
              date = today - 60*60*24*7;
              start_time = this.$time(date,"YY-MM-DD") +" "+ "00:00:00"
            break;
          }
          end_time = this.$time(today)
          this.date_arr[0] = start_time;
          this.date_arr[1] = end_time;
          if(index == 0) this.date_arr = [];
          this.date_index = index;
          let obj = {
            type: this.date_openType,
            date: this.date_arr,
            date_index: this.date_index
          }
          this.$emit('date',obj)
          this.closeTime();
        }else {
          // 自定义
          if(this.date_arr.length == 0) {
            this.picker_show = true
          }else {
            if(this.date_index == index) {
              this.picker_show = true
            }
          }
          this.date_index = index;
        } 
        
      },
      // 确定日期范围
      confirmDate(e) {
        let today = new Date(new Date().toLocaleDateString()).getTime();
        let last_day = new Date(new Date(e.date[1]).toLocaleDateString()).getTime();
        if(today < last_day) {
          uni.showToast({
            title: '日期范围不能大于今天',
            icon: 'none'
          });
          return
        }

        let start_time = "";
        let end_time = "";
        e.value.forEach((val,i) => {
          let date = val.replace(/\//g, '-');
          if(i == 1) {
            let today = this.$time(new Date()/1000,"DD");
            let lastDay = date.slice(8,10);
            if(today == lastDay) {
              date = date + " " + this.$time(new Date()/1000,"hh:mm:ss")
            }else {
              date = date + " " + "23:59:59"
            }
          }else {
              date = date + " " + "00:00:00"
          }
            this.date_arr[i] = date
        });
        let obj = {
          type: this.date_openType,
          date: this.date_arr,
          date_index: this.date_index
        }
        this.$emit('date',obj)
        this.picker_show = false;
        this.closeTime()
        
      },
      // 关闭日期选择器
      closePicker() {
        this.picker_show = false;
      },
      // 选择情感
      selectEmotion(status) {
        // this.emotion_status = status;
        this.$emit('emotionStatus',status)
      },
      // 点击搜索
      clickSearch() {
        if(this.search_status) {
          this.search_status = false;
          this.$refs.search_popup.hidden();
        }else {
          this.closeSelect();
          this.closeTime();
          this.search_status = true;
          this.$refs.search_popup.show();
        }
      },
      // 确定搜索
      confirmSearch() {
        this.closeSearch();
        this.$emit("searchContent",this.search_content)
      },
      // 点击排序
      clickSort() {
        this.sort_status?this.sort_status=false:this.sort_status=true;
        this.$emit('sort',this.sort_status)
      },
      // 关闭分类、级别选择
      closeSelect() {
        this.allClass_status = false;
        this.allLevel_status = false;
        this.$refs.selece_popup.hidden();
      },
      // 关闭搜索
      closeSearch() {
        this.search_status = false;
        this.$refs.search_popup.hidden();
      },
      // 关闭时间选择
      closeTime() {
        this.time_status = false;
        this.$refs.time_popup.hidden();
      },
      // 点击收藏分享
      enshrineShare(index) {
        this.enshrineShare_index = index
      },
      // 获取选择器结果
      selected(e) {
        // 全部分类
        if(this.allClass_status) {
          this.is_class = e.index;
          this.allClass_status = false;
          e.type = "class"
        }
        // 全部级别
        if(this.allLevel_status) {
          this.grade_index = e.index;
          this.allLevel_status = false;
          e.type = "level"
        }
        this.$refs.selece_popup.hidden();
        this.$emit('selectRes',e)
      },

      // 改变分类某一列
      columnchange(e) {
        if(e.detail.column == 0) {
          this.class_range[1] = this.classChild_Arr[e.detail.value]
        }
      },
      // 确定选择分类
      pickerChange(e) {
        this.class_value = e.detail.value;
        this.sort_status = false;
        this.search_content = '';
        this.$emit("classRes",e.detail.value);
        this.closeTime();
        this.closeSearch();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .screen1 {
    width: 100%;
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 10upx 0 20upx;
    box-sizing: border-box;
    box-shadow:0px 0px 10upx 0px rgba(34,34,34,0.05);
    >view {
      height: 100%;
    }
    .left {
      width: 76%;
      display: flex;
      .select_item {
        width: 100%;
        display: flex;
        align-items: center;
        >view {
          width: 90%;
          height:52upx;
          background:#F4F4F4;
          border-radius:6upx;
          padding: 0 54upx 0 23upx;
          box-sizing: border-box;
          position: relative;
          >view {
            width: 100%;
            height:100%;
            display: flex;
            align-items: center;
            font-size: 26upx;
            color: #666;
          }
          .iconfont {
            position: absolute;
            top: 50%;
            right: 23upx;
            transform: translateY(-50%);
            font-size: 34upx;
            color: #999;
            transition: all .5s;
          }
        }
        .select_on {
          position: relative;
          &::after {
            content: "";
            width: 100%;
            height: 30upx;
            background: #F4F4F4;
            position: absolute;
            left: 0;
            bottom: -24upx;
          }
          >view {
            color: #0084FF;
          }
          .iconfont {
            transform: translateY(-50%) rotate(180deg);
            color: #0084FF;
          }
        }
      }
      .btn_item {
        width: 280upx;
        height:60upx;
        box-sizing: border-box;
        border-radius:6upx;
        overflow: hidden;
        font-size: 26upx;
        color: #666;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F4F4F4;
        position: relative;
        .close_btn {
          width:46upx;
          height:36upx;
          position: absolute;
          right: 0;
          bottom: 0;
          >view {
            width: 66upx;
            height: 100%;
            position: absolute;
            bottom: -12upx;
            right: -24upx;
            transform: rotate(-45deg);
            background: #0084FF;
          }
          >text {
            position: absolute;
            right: -3upx;
            bottom: -4upx;
            font-size: 24upx;
            color: #fff;
            transform: scale(0.6)
          }
        }
      }
      .on {
        border:1px solid #0084FF;
        color: #0084FF;
        background:rgba(240,248,255,1);
      }
    }
    .icon_box {
      width: 24%;
      display: flex;
      align-items: center;
      >view {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 45upx;
          color: #0084FF;
        }
        .icon_status {
          transform: rotateX(180deg);
        }
      }
    }
  }
  .screen2 {
    .left {
      width: 83%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .icon_box {
      width: 17%;
    }
  }
  .screen3 {
    .left {
      width: 30%;
      .select_item {
        .class_name {
          width: 100%;
          height:52upx;
          background: rgba(0,0,0,0);
          border-radius:6upx;
          padding: 0 54upx 0 23upx;
          box-sizing: border-box;
          position: relative;
          >view {
            width: 100%;
            height:100%;
            display: flex;
            align-items: center;
            font-size: 30upx;
            color: #000;
            font-weight: 600;
          }
        }
      }
    }
    .icon_box {
      width: 70%;
      >view {
        flex: 1;
      }
    }
  }
</style>